<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ecoast</title>
    <!--bootstrap.min.css-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!--animate.css-->
    <link rel="stylesheet" href="css/animate.min.css">
    <!--fontawesome 5-->
    <link rel="stylesheet" href="css/all.min.css">
    <!--slicknav.css-->
    <link rel="stylesheet" href="css/slicknav.min.css">
    <!--slickslider.css-->
    <link rel="stylesheet" href="css/slick-theme.css">
    <link rel="stylesheet" href="css/slick.css">
    <!-- lity.css -->
    <link rel="stylesheet" href="css/lity.min.css">
    <!-- flaticon.css -->
    <link rel="stylesheet" href="fonts/flaticon.css">
    <!--Fav-icon-->
    <link rel="shortcut icon" href="images/fav-icon.png" type="image/x-icon">
    <!-- Custom.css -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
      <![endif]-->
</head>

<body>
    <!-- Preloader -->
    <div id="preloader"></div>
    <!-- Start-Header-Section -->
    <!-- Menu-start-area -->
    <header>
			<div class="topbar">
				<div class="container">
					<div class="row">
						<div class="col-lg-9 col-md-12">
							<div class="top-info">
								<ul>
									<li>Welcome to giant</li>
									<li><i class="fas fa-phone-alt"></i>+91-1234567890</li>
									<li><i class="fas fa-envelope"></i>support@companyname.com</li>
								</ul>
							</div>
						</div>
						<div class="col-lg-3 col-md-4">
							<div class="top-socail">
								<ul>
									<li>
										<a href="#"><i class="fab fa-facebook-f"></i></a>
									</li>
									<li>
										<a href="#"><i class="fab fa-google-plus-g"></i></a>
									</li>
									<li>
										<a href="#" class="active"><i class="fab fa-twitter"></i></a>
									</li>
									<li>
										<a href="#"><i class="fab fa-linkedin-in"></i></a>
									</li>
									<li>
										<a href="#"><i class="fab fa-pinterest-p"></i></a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="mid-bar">
				<div class="container">
					<div class="row">
						<!--logo-->
						<div class="col-lg-2 col-md-3 col-sm-4">
							<a href=""><img src="images/logo.png" alt="" class="logo"></a>
						</div>
						<!--Search-Bar-->
						<div class="col-lg-6 col-md-7 col-sm-8">
							<div class="nav-serch">
								<form class="serch-bar">
									<!--分类--->
									<select class="search-categorie" name="cars">
										<option value="volvo">所有类别</option>
								<c:forEach   items="${proclass}" var="pro">
								
								
										<option value="${pro.className} ">${pro.className} </option>
								</c:forEach>
										
									</select>
									<input type="search" class="search-bg" name="search" placeholder="Search...">
									<a href="#" class="submit-btn"><i class="fas fa-search"></i></a>
								</form>
							</div>
						</div>
						<!--login-->
						<div class="col-lg-2 col-md-1 col-sm-1">
							<div class="login">
								<div class="header-icon">
									<a href="login.html"><i class="flaticon-icon-126486"></i></a>
								</div>
								<div class="header-content">
										<p>${USER_SESSION.userName}</p>
									<h5><a href="login.html"> 你的账户 </a></h5>
								</div>
							</div>
						</div>
						<!--Cart-->
						<div class="col-lg-2 col-md-1 col-sm-1">
							<div class="login">
								<div class="header-icon">
									<a href="my-cart.html"><i class="flaticon-icon-1008010"></i></a>
								</div>
								<div class="header-content">
									<p>你的购物车</p>
									<h5><a href="my-cart.html">5 Items in cart</a></h5>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--Nav-Bar-->
			<div class="header-fixed header-one">
				<div class="container">
					<div class="row">
						<div class="col-lg-9">
							<nav class="navbar navbar-expand-lg navbar-light">
								<div class="collapse navbar-collapse my-lg-0" id="navbarNav">
									<ul class="navbar-nav mr-auto text-left">
										<li class="nav-item active">
											<a class="nav-link scroll" href="/wk1un10/B/pro?method=pro">家</a>
										</li>
										<li class="nav-item">
											<a class="nav-link scroll" href="/wk1un10/B/product?method=product">店</a>
										</li>
										<li class="nav-item">
											<a class="nav-link scroll" href="about-us.html">关于我们</a>
										</li>
										<li class="nav-item">
											<a class="nav-link scroll" href="#">页数</a>
											<ul class="dropdown">
												<li class="nav-item">
													<a class="nav-link scroll" href="my-cart.html">我的购物车</a>
												</li>
												<li class="nav-item">
													<a class="nav-link scroll" href="check-out.html">查看</a>
												</li>
												<li class="nav-item">
													<a class="nav-link scroll" href="order-history.html">订单历史</a>
												</li>
												<li class="nav-item">
													<a class="nav-link scroll" href="shop-side-bar.html">带侧栏购物</a>
												</li>
												<li class="nav-item">
													<a class="nav-link scroll" href="tracking.html">追踪</a>
												</li>
												<li class="nav-item">
													<a class="nav-link scroll" href="product-detail.html">产品信息</a>
												</li>
											</ul>
										</li>
										<li class="nav-item">
											<a class="nav-link scroll" href="#">Blogs</a>
											<ul class="dropdown">
												<li class="nav-item">
													<a class="nav-link scroll" href="blog-grid.html">Blog Grid</a>
												</li>
												<li class="nav-item">
													<a class="nav-link scroll" href="blog-with-sidebar.html">Blog With Sidebar</a>
												</li>
												<li class="nav-item">
													<a class="nav-link scroll" href="blog-detail.html">Blog Detail</a>
												</li>
											</ul>
										</li>
										<li class="nav-item">
											<a class="nav-link scroll" href="contact-us.html">联系我们</a>
										</li>
									</ul>
								</div>
							</nav>
						</div>
						<div class="col-lg-3">
							<!--login-->
							<div class="login-2">
								<div class="header-icon">
									<a href="login.html"><i class="flaticon-icon-126486"></i></a>
									<a href="my-cart.html"><i class="flaticon-icon-1008010"></i></a>
								</div>
							</div>
							<div class="selec-lang text-right">
								<div class="lang-drop eng">
									<!-- <select>
										<option value="USD" class="option-bg">USD</option>
										<option value="INR">INR</option>
										<option value="UAE">UAE</option>
									</select> -->
											<a href="${pageContext.request.contextPath}/logouta" class="login-out">退出登录</a>
								</div>
								<div class="lang-drop">
									<select>
										<option value="English">English</option>
										<option value="Hindi">Hindi</option>
										<option value="French">French</option>
									</select>
								</div>
							</div>
						</div>
						<div class="mobile-menu" data-logo="images/logo.png"></div>
					</div>
				</div>
			</div>
		</header>
    <!---Start-main-section-->
    <section class="page-slider">
        <div class="hero-banner-content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <h2 class="banner-title">Shop</h2>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Shop</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-lg-6">
                        <div class="about-slider-img">
                            <img src="images/about-slider-img.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!---End-Main-section-->
    <!---Start-Shop-section-->
    <section class="ws-section-spacing">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="shop-filter">
                        <ul class="nav nav-tabs title-bottom-spacing">
                            <a href="">简称:</a>
                            <select>
                                <option value="English">所有</option>
                                <option value="Hindi">Low To High</option>
                                <option value="French">High To Low</option>
                            </select>
                            <li><a data-toggle="tab" href="#grid" class="active"><i class="flaticon-grid"></i></a></li>
                            <li><a data-toggle="tab" href="#list"><i class="flaticon-list-1"></i></a></li>
                        </ul>
                        <div class="tab-content">
                            <!--Grid-->
                            <div id="grid" class="tab-pane fade in active">
                                <div class="row justify-content-sm-center">
                                    <!--item-->
                                    <!--遍历-->
                          <c:forEach  items="${productfenlei}" var="p" >
                                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-10">
                                        <div class="product-card">
                                            <div class="product-bg">
                                                <a href="#"><img src="${p.picture}" alt=""></a>
                                            </div>
                                            <div class="product-content">
                                                <h5><a href="/wk1un10/B/Productxiangqing?proName=${p.proName}">${p.proName}</a></h5>
                                                <p>Product Type Discription</p>
                                                <h4 class="price-text">$ ${p.price}</h4>
                                            </div>
                                        </div>
                                    </div>
                
					                </c:forEach> 
					 
                                   
                                    
                                 
                                    <!--item-->
                                   
                                    
                                </div>
                            </div>
                            <!--list-Products-->
                            <div id="list" class="tab-pane fade">
                                <div class="row">
                                    <!--item-->
                                       <c:forEach  items="${product}" var="p" >
                                      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-10">
                                        <div class="product-card">
                                            <div class="product-bg">
                                                <a href="product-detail.jsp"><img src="${p.picture}" alt=""></a>
                                            </div>
                                            <div class="product-content">
                                                <h5><a href="product-detail.jsp">${p.proName}</a></h5>
                                                <p>Product Type Discription</p>
                                                <h4 class="price-text">$ ${p.price}</h4>
                                            </div>
                                        </div>
                                    </div>
                
					                </c:forEach> 
                                    <!--item-->
                                   
                                    <!--item-->
                                   
                                    <!--item-->
                                   
                                    <!--item-->
                                    
                                    <!--item-->
                                   
                                    <!--item-->
                                 
                                    <!--item-->
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                    <!---pagination-->
                   <!--  <nav aria-label="Page navigation example" class="navigation-btn">
                        <ul class="pagination justify-content-center">
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true"><i class="fas fa-angle-double-left"></i></span>
                                </a>
                            </li>
                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                            <li class="page-item active"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item"><a class="page-link" href="#">....</a></li>
                            <li class="page-item"><a class="page-link" href="#">15</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true"><i class="fas fa-angle-double-right"></i></span>
                                </a>
                            </li>
                        </ul>
                    </nav> -->
                </div>
            </div>
    </section>
    <!---End-Shop-section-->
    <!---Start-Blog-Section-->
    
  <section class="ws-section-spacing deal-bg">
			<div class="container">
				
			</div>
		</section>
		<!---End-Main-section-->
		<!---Start-Trending-Product-section-->
		<section class="ws-section-spacing">
			<div class="container">
				<div class="row">
					<!--item-->									
					<!--item-->					
				</div>
				<!---Tranding products-->
				
				<!--推荐商品  -->
				<div class="row">
					<div class="col-lg-12">
						<h3 class="title">热销产品</h3>
						<div class="saprater bottom-spacing">
							<ul>
								<li class="saprater-box"></li>
								<li class="saprater-box"></li>
								<li class="saprater-box"></li>
							</ul>
						</div>
					</div>
				</div>
				<!--item-->
				<div class="row">
					<div class="product-slider">
						<div class="product-card-bg">
							<div class="product-bg">
								<a href="#"><img src="images/t1.png" alt=""></a>
							</div>
							<div class="product-content">
								<h5><a href="">Product Name</a></h5>
								<p>Product Type Discription</p>
								<h4 class="price-text">$200</h4>
							</div>
						</div>
						<!--item-->
						<div class="product-card-bg">
							<div class="product-bg">
								<a href="#"><img src="images/p4.png" alt=""></a>
							</div>
							<div class="product-content">
								<h5><a href="product-detail.html">Product Name</a></h5>
								<p>Product Type Discription</p>
								<h4 class="price-text">$200</h4>
							</div>
						</div>
						<!--item-->
						<div class="product-card-bg">
							<div class="product-bg">
								<a href="#"><img src="images/s1.png" alt=""></a>
							</div>
							<div class="product-content">
								<h5><a href="product-detail.html">Product Name</a></h5>
								<p>Product Type Discription</p>
								<h4 class="price-text">$200</h4>
							</div>
						</div>
						<!--item-->
						<div class="product-card-bg">
							<div class="product-bg">
								<a href="#"><img src="images/t2.png" alt=""></a>
							</div>
							<div class="product-content">
								<h5><a href="product-detail.html">Product Name</a></h5>
								<p>Product Type Discription</p>
								<h4 class="price-text">$200</h4>
							</div>
						</div>
						<!--item-->
						<div class="product-card-bg">
							<div class="product-bg">
								<a href="#"><img src="images/t4.png" alt=""></a>
							</div>
							<div class="product-content">
								<h5><a href="product-detail.html">Product Name</a></h5>
								<p>Product Type Discription</p>
								<h4 class="price-text">$200</h4>
							</div>
						</div>
						<!--item-->
						<div class="product-card-bg">
							<div class="product-bg">
								<a href="#"><img src="images/t2.png" alt=""></a>
							</div>
							<div class="product-content">
								<h5><a href="product-detail.html">Product Name</a></h5>
								<p>Product Type Discription</p>
								<h4 class="price-text">$200</h4>
							</div>
						</div>
						<!--item-->
						<div class="product-card-bg">
							<div class="product-bg">
								<a href="#"><img src="images/t4.png" alt=""></a>
							</div>
							<div class="product-content">
								<h5><a href="product-detail.html">Product Name</a></h5>
								<p>Product Type Discription</p>
								<h4 class="price-text">$200</h4>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
    
  
    <!---End-Blog-Section-->
    <!---Start-Footer-Section-->
    <footer class="same-section-spacing footer-bg">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-4">
                    <div class="footer-about">
                        <img src="images/logo-wht.png" alt="">
                        <p>Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit. Aenean com modo ligula eget dolor. Aenean ma ssa. Cum sociis </p>
                    </div>
                </div>
                <!--item-->
                <div class="col-lg-3 col-md-4">
                    <div class="popular-tag">
                        <h4 class="footer-title">Populer Tags</h4>
                        <ul>
                            <li><a href="#">Fashion</a></li>
                            <li><a href="#">T-Shirts</a></li>
                            <li><a href="#">Women</a></li>
                            <li><a href="#">Men</a></li>
                            <li class="active"><a href="#">Jeans</a></li>
                            <li><a href="#">Modern</a></li>
                            <li><a href="#">Shirts</a></li>
                            <li><a href="#">Classic</a></li>
                            <li><a href="#">Shoes</a></li>
                            <li><a href="#">Running</a></li>
                        </ul>
                    </div>
                </div>
                <!--item-->
                <div class="col-lg-3 col-md-4">
                    <div class="contact-us">
                        <h4 class="footer-title">Contact-Us</h4>
                        <ul>
                            <li><i class="fas fa-map-marker-alt"></i> 180-A Apolo apart, Front of pell Junction, </li>
                            <li><i class="fas fa-phone-alt"></i>(+91) 1234567890 </li>
                            <li><i class="fas fa-envelope"></i> info@companyname.com </li>
                        </ul>
                    </div>
                </div>
                <!--item-->
                <div class="col-lg-3 col-md-4">
                    <div class="contact-us">
                        <h4 class="footer-title">Contact-Us</h4>
                        <p>Sign up the newsletter</p>
                        <input type="email" name="email" placeholder="Email" required="" class="email">
                        <button type="submit" class="contact-btn">Post Comment</button>
                    </div>
                </div>
                <!--copy-right-->
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="container-fluid">
                            <div class="copy-right">
                                <span class="copy-right-seprater"></span>
                                <p>2019 . All Rights Reserved Developed By Company Name.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </footer>
    <!-- Jquery.min.js-->
    <script src="js/jquery-3.3.1.slim.min.js"></script>
    <script src="js/jquery.1.12.4.js"></script>
    <!--bootstrap.min.js-->
    <script src="js/bootstrap.min.js"></script>
    <!--slicknav.min.js-->
    <script src="js/jquery.slicknav.min.js"></script>
    <!--slickslider.min.js-->
    <script src="js/slick.min.js"></script>
    <!-- waypoint.min.js -->
    <script src="js/waypoints.min.js"></script>
    <!-- lity.js -->
    <script src="js/lity.min.js"></script>
    <!-- imagesloaded.js -->
    <script src="js/imagesloaded.js"></script>
    <!-- wow.js -->
    <script src="js/wow.min.js"></script>
    <!-- main.js -->
    <script src="js/main.js"></script>
</body>

</html>